<template>
    <div class="wrapper">
        <el-card>
            <div class="rowDiv">
                <div class="row-left">
                    <div class="row-item">
                        <span class="demonstration">时间范围:</span>
                        <el-date-picker
                                v-model="value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </div>
                    <div class="row-item">
                        仓库名称:<el-select
                            v-model="state.waretype"
                            placeholder="选择订单状态"
                    >
                        <el-option label="仓库1" value="001"></el-option>
                        <el-option label="仓库2" value="002"></el-option>
                    </el-select>
                    </div>
                    <div class="row-item">
                        报损状态:<el-select
                            v-model="state.waretype"
                            placeholder="选择报损状态"
                    >
                        <el-option label="仓库1" value="001"></el-option>
                        <el-option label="仓库2" value="002"></el-option>
                    </el-select>
                    </div>
                </div>
                <div class="row-right">
                    <el-button type="primary" @click="new_loss">新建报损</el-button>
                </div>
            </div>
            <el-table
                    @selection-change="handleSelectionChange"
                    ref="multipleTable" :data="state.tableData" style="width: 100%; margin-top: 20px">
                <el-table-column type="selection"> </el-table-column>
                <el-table-column fixed prop="date" label="编号"> </el-table-column>
                <el-table-column fixed prop="date" label="报损仓库"> </el-table-column>
                <el-table-column prop="name" label="商品名称"> </el-table-column>
                <el-table-column prop="name" label="批次号"> </el-table-column>
                <el-table-column prop="name" label="规格"> </el-table-column>
                <el-table-column prop="name" label="库存（袋）"> </el-table-column>
                <el-table-column prop="name" label="报损数量（袋）"> </el-table-column>
                <el-table-column prop="name" label="报损金额"> </el-table-column>
                <el-table-column prop="name" label="报损原因"> </el-table-column>
                <el-table-column prop="name" label="报损时间"> </el-table-column>
                <el-table-column prop="name" label="报损人"> </el-table-column>
                <el-table-column prop="name" label="备注"> </el-table-column>
                <el-table-column prop="name" label="状态"> </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                                @click.native.prevent="editRow(scope, state.tableData)"
                                type="text"
                                size="small"
                        >
                            审核
                        </el-button>
                        <el-button
                                @click.native.prevent="detailRow(scope, state.tableData)"
                                type="text"
                                size="small"
                        >
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex">
                <el-col :span="12">
                    <el-checkbox
                            @change="checkAll"
                            v-model="state.pageChecked"
                            label="本页全选"
                            name="type"
                    ></el-checkbox><el-button @click="unbind_all_Btn">导出</el-button>
                </el-col>
                <el-col :span="12">
                    <Page v-if="state.totalPage" :totalPage="state.totalPage" @changePage="changePage"></Page>
                </el-col>
            </el-row>
            <el-drawer
                    :title="state.title"
                    v-model="state.drawer"
                    :direction="direction"
                    :before-close="handleClose" destroy-on-close>
                <div class="conTxt">
                    <el-form
                            :model="state.form"
                            :rules="state.rules"
                            ref="form"
                            label-width="100px"
                            class="demo-ruleForm"
                    >
                        <el-form-item label="报损仓库" prop="ware_name">
                            <el-select v-model="state.form.ware_name" placeholder="请选择报损仓库">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商品名称" prop="pro_name">
                            <el-select v-model="state.form.pro_name" placeholder="请选择商品名称">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="批次号" prop="batch_num">
                            <el-input
                                    type="text"
                                    v-model="state.form.batch_num"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="库存量" prop="Inventory_num">
                            <el-input
                                    type="text"
                                    v-model="state.form.Inventory_num"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="报损数量" prop="loss_num">
                            <el-input
                                    type="text"
                                    v-model="state.form.loss_num"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="报损金额" prop="loss_price">
                            <el-input
                                    type="text"
                                    v-model="state.form.loss_price"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="报损原因" prop="loss_reason">
                            <el-input
                                    type="textarea"
                                    v-model="state.form.loss_reason"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                    <span class="dialog-footer">
            <el-button @click="state.drawer = false"
            >取 消</el-button
            >
            <el-button type="primary" @click="create()">提  交</el-button>
          </span>
                </div>
            </el-drawer>
        </el-card>
    </div>
</template>

<script>
    import { ref, reactive } from "vue";
    import { useRouter } from "vue-router";
    import searchDiv from '@/components/Search.vue';
    import  Page from '@/components/Pagination.vue';
    export default {
        name:"pro_loss",
        components: {searchDiv,Page},
        props: {},
        setup() {
            let multipleTable = ref("null");
            const router = useRouter();
            let state = reactive({
                title:'',
                common_id:'',
                option_type:'',
                drawer:false,
                totalPage:1,
                placeholder:'请输入您要搜索的内容',
                searchval: "",
                form:{
                     ware_name:'',
                    pro_name:'',
                    batch_num:'',
                    Inventory_num:'',
                    loss_num:'',
                    loss_price:'',
                    loss_reason:''
                },
                pageChecked:false,
                multipleSelection:[],
                tableData: [
                    {
                        date: "2016-05-03",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                    {
                        date: "2016-05-02",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                    {
                        date: "2016-05-04",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                    {
                        date: "2016-05-01",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                    {
                        date: "2016-05-08",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                    {
                        date: "2016-05-06",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                    {
                        date: "2016-05-07",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                        zip: 200333,
                    },
                ],
            });
            function new_loss(){
                state.title="新建报损";
                state.option_type=true;
                state.drawer=true;
            }
            function editRow(item){
                state.title="编辑";
                state.option_type=false;
                state.drawer=true;
                state.common_id=item.name;
            }
            //表格选择
            function handleSelectionChange(val) {
                state.multipleSelection = val;
            }
            //全选
            function checkAll() {
                state.multipleSelection = [];
                if (state.pageChecked) {
                    multipleTable.value.toggleAllSelection();
                    state.multipleSelection.push(state.tableData.filter((v) => v.date));
                } else {
                    multipleTable.value.clearSelection();
                    state.multipleSelection = [];
                }
            }
            // 创建仓库
            return {
                new_loss,
                editRow,
                multipleTable,
                handleSelectionChange,
                state,
                checkAll,
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        height: 100%;
        .conTxt{
            width: 60%;
            margin: auto;
        }
        .el-card {

            height: 100%;
            .cart-title::before {
                content: " ";
                width: 4px;
                height: 20px;
                background: #1890ff;
                background: #1890ff;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
            }
            .rowDiv {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .row-left {
                    display: flex;
                    width: 70%;
                    justify-content: space-between;
                    .row-item {
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                    }
                }
                .row-right {
                    width: 15%;
                    display: flex;
                    justify-content: flex-end;
                }
            }
            .el-table /deep/ th {
                background-color: #eaeaea;
                text-align: center;
            }
            .el-table /deep/ td {
                text-align: center;
            }
            .el-select {
                width: 100%;
            }
        }
    }
</style>